<template>
	<div v-for="item in notifications" class="panel panel-default">
		<div class="panel-heading">{{ item.name }}</div>
		<div class="panel-body" v-html="item.content"></div>
	</div>
</template>

<script type="module">
import { GroupService } from '@/common/common.object'

export default {
	inject: ['groupId', 'group'],
	data() {
		return {
			notifications: null,
		};
	},
	created() {
		GroupService.getNotifications(this.groupId).then(result => {
			this.notifications = result;
		});
	},
}
</script>

<style scope>
.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}

.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.panel-default>.panel-heading {
	color: #333;
	background-color: #f5f5f5;
	border-color: #ddd;
}

.panel-body {
	padding: 15px;
}
</style>
